<template>
	<div class="home">
		<div class="main clear">
			<div class="left">
				<div class="title">
					<span class="type">话题</span>
					<span class="span-title">{{ title }}</span>
				</div>
				<list></list>
			</div>
			<div class="right">
				<ad-squa></ad-squa>
				<recommend></recommend>
				<topic></topic>
			</div>
		</div>
		
	</div>
</template>

<script>
import list from '@/components/list'
import recommend from '@/components/recommend'
import topic from '@/components/topic'
import adRect from '@/components/ad/rect'
import adSqua from '@/components/ad/squa'
export default {
	data() {
		return {
			title: null
		}
	},
    components: { 
		list, 
		recommend, 
		topic,
		adRect, 
		adSqua
	},
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
			this.title = this.$route.query.title;
		}
	},
	methods: {
	},
	mounted() {
		this.title = this.$route.query.title;
	}
}
</script>

<style scoped lang="scss">
.main {
	.left {
		width: 895px;
		.title {
			background: #fff;
			text-align: center;
			font-size: 18px;
			line-height: 25px;
			height: 65px;
			font-weight:bold;
			padding: 20px;
			.type {
				color: #f86254;
				float: left;
			}
			.span-title {
				padding-right: 15px;
			}
			margin-bottom: 20px;
		}
	}
	.right {
		width: 285px;
	}
}
</style>